<template>
  <div class="content forget-pwd bg-white">
    <div class="head-top">
      <dc-header :page-to="'/login'" :title="'手机号验证'"></dc-header>
      <div class="pl50 pr50 pt68">
        <inputItem placeholder="请输入手机号" type="tel"
                   iconName="icon-login-account"
                   v-model="username"
                   :maxLength = "11"
                   v-validate="{ rules: { required: true, phone: true } }"
                   name="手机号"
        />
        <inputCode class="mt30" placeholder="请输入验证码" type="number"
                   iconName="icon-register-yanzheng"
                   v-model="smsAuthCode"
                   v-validate="{ rules: { required: true, length: 6 } }"
                   name="验证码"
                   :btnlabel="code"
                   :btnaction="_getAuthCode"
                   :disabled="!show"
        />
      </div>
      <div class="pl50 pr50 mt50">
        <mt-button size="large" type="primary" @click="_next"
                   :disabled="(!smsAuthCode || !username )&& errors.items.length==0 || errors.items.length!=0">下一步
        </mt-button>
      </div>
    </div>
  </div>
</template>
<script>
  import header from '@/components/header';
  import inputItem from '@/components/input/inputItem';
  import inputCode from '@/components/input/inputCode';
  import comApi from '../../common/api/api';
  import api from '../../common/api/login';
  import mintUi from '../../common/mintUi';
  const TIME_COUNT = 60;
  export default {
    data () {
      return {
        username: '',
        smsAuthCode: '',
        code: '获取验证码',
        show: true,
        count: '',
        timer: null
      };
    },
    components: {
      'dc-header': header,
      'inputItem': inputItem,
      'inputCode': inputCode
    },
    methods: {
      getCode () {
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.code = this.count + 's后重发';
          this.show = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
              this.code = this.count + 's后重发';
            } else {
              this.show = true;
              this.code = '获取验证码';
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        }
      },
      _getAuthCode () {
        if (this.username) {
          this.$validator.validate('手机号', this.username).then((result) => {
            if (result) {
              this.getCode();
            }
          });
          let data = {
            username: this.username
          };
          comApi.getAuthCode(data)
            .then(res => {
              console.log(res);
              this.smsAuthCode = res;
            });
        } else {
          mintUi.openToast('请输入手机号');
        }
      },
      _next () {
        let self = this;
        this.$validator.validateAll().then((result) => {
          if (result) {
            let data = {
              username: this.username,
              smsAuthCode: this.smsAuthCode
            };
            api.forgetPassword(data)
              .then(res => {
                console.log(res);
                self.$router.push({path: '/resetPwd', query: {username: self.username}});
              });
          } else {
            mintUi.openToast(this.errors.items[0].msg);
          }
        });
      }
    }
  };
</script>
<style lang="scss">
  @import "../../assets/css/variable";

  .forget-pwd {
    .pt68 {
      padding-top: px2rem(68px);
    }
    .mt60 {
      margin-top: px2rem(60px);
    }
  }
</style>
